<template>
  <div>
    <div id="mainbook" :style="{width:'110%',height:'400px',marginTop:'60px'}"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
name:'BookData',
data(){
    return{
        time:[],
        series:[],
        url:'http://192.168.35.36:3005',
    }
    
},
methods:{
    getsum(arr){
        let data =[]
        arr.forEach(item=>{
            data.push(item.arr.length)
        })
        return data
    }
},
created(){
    this.$axios.get(`${this.url}/totaldata/bookdata`).then(content=>{
        content.data.one.forEach(item=>{
           this.time.push(item.time)
        })
        this.series[0]={
            type: 'line',
            // stack: 'x',
            name:'申请借阅',
            data:this.getsum(content.data.one),
        }
        this.series[1]={
            type: 'line',
            // stack: 'x',
            name:'已借阅',
            data:this.getsum(content.data.two),
        }
        this.series[2]={
            type: 'line',
            // stack: 'x',
            name:'已归还',
            data:this.getsum(content.data.three),
        }


    }).then(()=>{
            var myChart = echarts.init(document.getElementById('mainbook'));
            window.onresize = function() {
            myChart.resize();
            }
            myChart.setOption({
                title:{
                text:'近7天书籍借阅情况'
                },
                tooltip: {},
                xAxis: {
                data: this.time
                },
                yAxis: {},
                series:this.series,
                legend: {
                    data: ['申请借阅', '已借阅', '已归还'],
                    icon: 'rect'
   
                }
            })
        })
}

}
</script>

<style>

</style>